import React, { useState } from 'react';
import { Card, Typography, Tag, Collapse, Rate } from 'antd';
import { FileTextOutlined, LinkOutlined } from '@ant-design/icons';

const { Text, Paragraph, Title } = Typography;
const { Panel } = Collapse;

interface ReferenceProps {
  reference: {
    id: string;
    title: string;
    content: string;
    source: string;
    relevanceScore: number;
    metadata: {
      fileName?: string;
      url?: string;
      date?: string;
      author?: string;
      [key: string]: any;
    };
  };
}

const SourceReference: React.FC<ReferenceProps> = ({ reference }) => {
  const [expanded, setExpanded] = useState(false);

  return (
    <Card 
      size="small" 
      className="reference-card"
      style={{ marginBottom: 10, borderLeft: `3px solid rgba(0,140,255,${reference.relevanceScore/5})` }}
    >
      <div className="reference-header">
        <div className="reference-title">
          <Title level={5} ellipsis>{reference.title}</Title>
          <Tag color="blue">
            {reference.metadata.fileName ? 
              <><FileTextOutlined /> {reference.metadata.fileName}</> : 
              <><LinkOutlined /> {new URL(reference.source).hostname}</>
            }
          </Tag>
        </div>
        <div className="reference-score">
          <Text type="secondary">相关度:</Text>
          <Rate 
            disabled 
            defaultValue={reference.relevanceScore} 
            count={5} 
            style={{ fontSize: 12 }}
          />
        </div>
      </div>
      
      <Collapse 
        ghost 
        onChange={() => setExpanded(!expanded)}
        className="reference-content-collapse"
      >
        <Panel 
          header={expanded ? "收起内容" : "展开内容"} 
          key="1"
        >
          <Paragraph 
            ellipsis={{ rows: 5, expandable: true, symbol: '查看更多' }}
            className="reference-content"
          >
            {reference.content}
          </Paragraph>
          
          <div className="reference-metadata">
            {reference.metadata.author && <Text type="secondary">作者: {reference.metadata.author}</Text>}
            {reference.metadata.date && <Text type="secondary">日期: {reference.metadata.date}</Text>}
            <a href={reference.source} target="_blank" rel="noopener noreferrer">查看原文</a>
          </div>
        </Panel>
      </Collapse>
    </Card>
  );
};

export default SourceReference; 